import React, { Component } from 'react'
import List from '../compontents/User/List';
import UserAxios from '../service/user/User';
import UserTable from '../Model/Table/UserTable';
interface Istate{
    list:Array<UserTable>,
    name:string,
    pwd:string
}

export default class User extends Component<any,Istate> {
    constructor(props:any){
        super(props);
        this.state={
            list:[],
            name:"",
            pwd:"",
        }
    }
    async componentDidMount(){
        let {data:list}=await UserAxios.query();
        this.setState({
            list
        })
    }
    del=async (id?:number)=>{
        // console.log(id);
       
        await UserAxios.del(id);
        this.setState({
            list:this.state.list.filter(item=>item.id!=id)
        })

    }
    registered=async (name:string,pwd:string)=>{
        await UserAxios.add(name,pwd);
        let {data:list}=await UserAxios.query();
        this.setState({
            list
        })
    }
    setName=(value:string)=>{
        let reg=/^[\u4e00-\u9fa5]{1,3}$/;
        if(reg.test(value)){
            this.setState({
                name:value
            })
        }
    }
    setPwd=(value:string)=>{
        this.setState({
            pwd:value
        })
    }
  render() {
    return (
        <>
        <div>User</div>
        <div className='user'>
            <div className='inputs'>
                <div className='input'>
                    <div className='info'>用户名</div>
                    <input type="text" value={this.state.name} onChange={(e)=>{this.setName(e.target.value)}}></input>
                </div>
                <div className='input'>
                    <div className='info'>密码</div>
                    <input type="text" value={this.state.pwd} onChange={(e)=>{this.setPwd(e.target.value)}}></input>
                </div>
                <div className='input'>
                    <button onClick={()=>{this.registered(this.state.name,this.state.pwd)}}>注册</button>
                </div>
            </div>
            <div className='tr'>
                <div className='td'>编号</div>
                <div className='td'>用户名</div>
                <div className='td'>密码</div>
                <div className='td'>操作</div>
            </div>
            <List list={this.state.list} del={this.del}></List>
        </div>
        </>
      
    )
  }
}
